<template>
    <div class="audit-addProductAndPrice-view">

        <el-form :inline="true" label-width="120px" label-position="right">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="流程编号：">
                        {{ detailData.processNo }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="创建时间：">
                        {{ dateFormat('yyyy-mm-dd HH:MM',detailData.startTime) }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="创建人：">
                        {{ detailData.initiator }}
                    </el-form-item>
                </el-col>

            </el-row>

        </el-form>

        <item-title title="招商要素基本信息" />

        <el-form :inline="true" label-position="right"
                 size="small"
                 class="filter-form-inline"
                 label-width="120px">
            <el-row>
                <el-col :span="8">
                    <el-form-item v-if="agentProduct.agentType == 'agent'" label="代理商名称：">
                        {{ agentProduct.agentName }}
                    </el-form-item>
                    <el-form-item v-else label="兼职名称：">
                        {{ agentProduct.userName }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="招商要素编号：">
                        {{ agentProduct.agentProductNumber }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="产品信息：">
                        <span>{{ getProductName(agentProduct) }}</span>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="代理地区：">
                        <area-list-view :areas="agentProduct.region" />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="交易价：">
                        <div style="display: flex;align-items: center">
                            <span>{{ agentProduct.tradePrice }}元</span>
                            <span v-if="agentProduct.sellUnit">/{{getLabel('sell_unit',agentProduct.sellUnit)}}</span>
                        </div>

                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="可营销终端：">
                        {{ getLabel('app_mode',agentProduct.terminalType) }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="代理期限至：">
                        {{ dateFormat('yyyy-mm-dd',agentProduct.agentEndTime) }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="最低销量：">
                        <span v-if="agentProduct.minSale">{{ agentProduct.minSale }}{{ getLabel('sell_unit',agentProduct.sellUnit) }}/{{ getLabel('sell_num_unit',agentProduct.minSaleUnit) }}</span>
                        <span v-else>未设置</span>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="销量保证金：">
                        <span v-if="agentProduct.minSalePromise">{{ agentProduct.minSalePromise }}元</span>
                        <span v-else>未设置</span>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="负责营销职员：">
                        {{ agentProduct.headName }}
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="16">
                    <el-form-item label="其他约定：">
                        {{ agentProduct.remark }}
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>

        <item-title title="注册开发终端信息" />

        <el-table
                max-height="350px"
                border
                header-cell-class-name="table-header"
                :data="tableData"
        >
            <el-table-column type="index"/>
            <el-table-column
                    header-align="center"
                    align="left"
                    label="终端名称"
                    min-width="150px"
                    show-overflow-tooltip
            >
                <template #default="scope">

                    <span>{{ scope.row.terminalName }}</span>

                </template>
            </el-table-column>
            <el-table-column
                    header-align="center"
                    align="center"
                    label="所在地区"
                    min-width="100px"
                    show-overflow-tooltip
            >
                <template #default="scope">
                    {{ scope.row.provinceName }}/{{ scope.row.cityName }}/{{ scope.row.areaName }}
                </template>
            </el-table-column>
            <el-table-column
                    header-align="center"
                    align="center"
                    label="准入模式"
                    width="100px"
            >
                <template #default="scope">
                    {{ getLabel('access_mode',scope.row.accessMode) }}
                </template>
            </el-table-column>
            <el-table-column
                    header-align="center"
                    align="center"
                    label="终端价(元)"
                    width="100px"
            >
                <template #default="scope">
                    {{ scope.row.terminalPrice }}
                </template>
            </el-table-column>
            <el-table-column
                    header-align="center"
                    align="center"
                    label="开发期限至"
                    width="100px"
            >
                <template #default="scope">
                    <span v-if="scope.row.expireTime">{{ dateFormat('yyyy-mm-dd',scope.row.expireTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    header-align="center"
                    align="center"
                    label="开发保证金(元)"
                    width="130px"
            >
                <template #default="scope">
                    <span v-if="scope.row.devEarnestMoney">{{ scope.row.devEarnestMoney }}</span>
                    <span v-else>未设置</span>
                </template>
            </el-table-column>
            <el-table-column
                    header-align="center"
                    align="center"
                    label="最低销量"
                    width="150px"
            >
                <template #default="scope">
                    <span v-if="scope.row.minSale">{{ scope.row.minSale }}{{ getLabel('sell_unit',agentProduct.sellUnit) }}/{{ getLabel('sell_num_unit',scope.row.minSaleUnit) }}</span>
                    <span v-else>未设置</span>
                </template>
            </el-table-column>
            <el-table-column header-align="center" align="center" label="销量保证金(元)" width="130px">
                <template #default="scope">
                    <span v-if="scope.row.sellEarnestMoney">{{ scope.row.sellEarnestMoney }}</span>
                    <span v-else>未设置</span>
                </template>
            </el-table-column>
        </el-table>

        <!--合同详情-->
        <detail-drawer
                ref="detailDrawer"
                custom-title
                :size-width="1000"
        >
            <template #title>
                <span>合同 </span>
                <span class="drawerTitle">{{ agentProduct.contractName }} </span>
            </template>
            <template
                    #contents
            >
                <div class="drawer-content">
                    <div class="history-list">
                        <contract-detail
                                ref="salesDetailDrawer"
                                :contract-id="agentProduct.contractId"
                        />
                    </div>
                </div>
            </template>
        </detail-drawer>

    </div>
</template>

<script>
// 新增产品与价格审批
import {defineAsyncComponent, defineComponent, reactive, toRefs, watch} from 'vue'

export default defineComponent({
        name: 'AddProductAndPrice2',
        components: {
            contractDetail: defineAsyncComponent(() => import('../../../../commonView/contract/contractDetail.vue')),
        },
        props: {
            detailData: {
                type: Object,
                default: {}
            },
        },
        setup(props) {
            var data = reactive({
                datas: {},
                agentProduct: {},
                type: 'agent',
                detailDrawer: null,
                tableData:[]
            })

            watch(
                () => props.detailData,
                (newval, oldval) => {
                    if (newval && newval.data) {

                        console.log(newval.data)
                        data.agentProduct = newval.data.agentProductRes
                        data.tableData = newval.data.form.List
                    }
                },
                { immediate: true, deep: true }
            )

            const contractClick = () => {
                data.detailDrawer.open()
            }

            return {
                ...toRefs(data),

                contractClick
            }
        }
    })
</script>

<style lang="scss" scoped>
    @import "@/style/basics.scss";
    .audit-addProductAndPrice-view{
        .mainColor{
            color: $active-color;
        }
        .drawerTitle{
            font-size: 18px;
        }
    }
</style>
